@extends('admin.layout')

@section('title', '注册新用户')

@section('pagebody')
    <div class="row m-t-lg">
        <div class="col-md-6 col-md-offset-3">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1">用户名注册</a></li>
                    <li><a data-toggle="tab" href="#tab-2">手机注册</a></li>
                    <li><a data-toggle="tab" href="#tab-3">邮箱注册</a></li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <form id="formRegisterByName" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">用户名：</label>
                                    <div class="col-lg-8">
                                        <input type="text" id="txtUsername" name="username" class="form-control" placeholder="请输入用户名，6-20个字符" required="" autofocus="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password" class="form-control" placeholder="设置您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">确认密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password_confirm" class="form-control" placeholder="请再次确认您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">验证码：</label>
                                    <div class="col-lg-4">
                                        <input type="text" name="captcha" class="form-control" placeholder="验证码" maxlength="4" autocomplete="off" required="" />
                                    </div>
                                    <div class="col-lg-4">
                                        <a href="javascript:;" onclick="changeCaptchaImg()" title="点击更换">
                                            <img id="captchaImg" src="{{captcha_src()}}" />
                                        </a>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-offset-3 col-lg-9">
                                        <button type="submit" class="btn btn-primary btn-w-m">注册新用户</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <form id="formRegisterByMobile" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">手机号：</label>
                                    <div class="col-lg-8">
                                        <input type="text" id="txtMobile" name="mobile" class="form-control" placeholder="请输入您的手机号" required="" autofocus="" onkeyup="value=value.replace(/[^\d]/g,'');" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">验证码：</label>
                                    <div class="col-lg-8">
                                        <div class="input-group">
                                            <input type="text" name="code" class="form-control" maxlength="6" autocomplete="off" placeholder="请输入验证码" required="" />
                                            <span class="input-group-btn">
                                                <button type="button" id="btnGetCode1" class="btn btn-white">获取验证码</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password" class="form-control" placeholder="设置您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">确认密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password_confirm" class="form-control" placeholder="请再次输入您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-9 col-lg-offset-3">
                                        <button type="submit" class="btn btn-primary btn-w-m">注册新用户</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="tab-3" class="tab-pane">
                        <div class="panel-body">
                            <form id="formRegisterByEmail" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">注册邮箱：</label>
                                    <div class="col-lg-8">
                                        <input type="email" id="txtEmail" name="email" class="form-control" placeholder="请输入您的邮箱" required="" autofocus="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">验证码：</label>
                                    <div class="col-lg-8">
                                        <div class="input-group">
                                            <input type="text" name="code" class="form-control" maxlength="6" autocomplete="off" placeholder="请输入验证码" required="" />
                                            <span class="input-group-btn">
                                                <button type="button" id="btnGetCode2" class="btn btn-white">获取验证码</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password" class="form-control" placeholder="设置您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">确认密码：</label>
                                    <div class="col-lg-8">
                                        <input type="password" name="password_confirm" class="form-control" placeholder="请再次输入您的登录密码" required="" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-lg-9 col-lg-offset-3">
                                        <button type="submit" class="btn btn-primary btn-w-m">注册新用户</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center m-t-lg">
                <p class="clearfix">
                    已经注册过用户了？返回
                    <a href="{{url('admin')}}">
                        <small>直接登录</small>
                    </a>
                </p>
            </div>
        </div>
    </div>
@endsection

@section('pageheader')
    <style>
        body {background-color: #f3f3f4;}
        #captchaImg{height: 32px; border: 1px solid #e5e6e7;}
        .required_error{
            background: rgb(251, 227, 228);
            border: 1px solid #fbc2c4;
            color: #8a1f11;
        }
    </style>
@endsection

@section('pagescript')
    <script src="{{cdn1('assets/controllers/stringExt.js')}}"></script>
    <script>
        var changeCaptchaImg = function(){
            $("#captchaImg").attr('src', '{{captcha_src()}}' + Math.random());
        };

        seajs.use('models/adminModel', function(adminModel) {
            $("#btnGetCode1").on("click", function(){
                var obj = $("#txtMobile"), str = obj.val();
                if(str.isMobile() == false){
                    obj.focus();
                    return false;
                }
                adminModel.sendSmsCode({"mobile":str}, function(){
                    obj.prop("readonly", true);
                    artInfo('请查收您的手机短信，获取验证码');
                }, failure);
            });

            $("#btnGetCode2").on("click", function(){
                var obj = $("#txtEmail"), str = obj.val();
                if(str.isEmail() == false){
                    obj.focus();
                    return false;
                }
                adminModel.sendMailCode({"email":str}, function(){
                    obj.prop("readonly", true);
                    artInfo('请查收您注册邮箱的邮件，获取验证码');
                }, failure);
            });

            $("#txtUsername").on("blur", function(){
                var that = this;
                if(required_check(this.value)){
                    adminModel.checkUsername({"username":this.value}, function(){
                        $(that).removeClass("required_error");
                    }, function(){
                        $(that).addClass("required_error");
                    });
                }
            });

            $("#txtMobile").on("blur", function(){
                var that = this;
                if(this.value.isMobile()){
                    adminModel.checkMobile({"mobile":this.value}, function(){
                        $(that).removeClass("required_error");
                    }, function(){
                        $(that).addClass("required_error");
                    });
                }
            });

            $("#txtEmail").on("blur", function(){
                var that = this;
                if(this.value.isEmail()){
                    adminModel.checkEmail({"email":this.value}, function(){
                        $(that).removeClass("required_error");
                    }, function(){
                        $(that).addClass("required_error");
                    });
                }
            });

            $("#formRegisterByName").on("submit", function(){
                var that = this;
                if(required_check(this.captcha.value) == false){
                    this.captcha.focus();
                    return false;
                }
                if(required_check(this.password.value) == false){
                    this.password.focus();
                    return false;
                }
                if(this.password.value != this.password_confirm.value){
                    this.password_confirm.focus();
                    return false;
                }
                $(this).find(':submit').prop('disabled', true);
                adminModel.register($(this).serialize(), function(data){
                    window.location.href = "{{url('admin')}}";
                }, function(result){
                    $(that).find(":submit").removeAttr("disabled");
                    artInfo(result);
                });
                return false;
            });

            $("#formRegisterByMobile").on("submit", function(){
                var that = this;
                if(required_check(this.code.value) == false){
                    this.code.focus();
                    return false;
                }
                if(required_check(this.password.value) == false){
                    this.password.focus();
                    return false;
                }
                if(this.password.value != this.password_confirm.value){
                    this.password_confirm.focus();
                    return false;
                }
                $(this).find(':submit').prop('disabled', true);
                adminModel.register($(this).serialize(), function(data){
                    window.location.href = "{{url('admin')}}";
                }, function(result){
                    $(that).find(":submit").removeAttr("disabled");
                    artInfo(result);
                });
                return false;
            });

            $("#formRegisterByEmail").on("submit", function(){
                var that = this;
                if(required_check(this.code.value) == false){
                    this.code.focus();
                    return false;
                }
                if(required_check(this.password.value) == false){
                    this.password.focus();
                    return false;
                }
                if(this.password.value != this.password_confirm.value){
                    this.password_confirm.focus();
                    return false;
                }
                $(this).find(':submit').prop('disabled', true);
                adminModel.register($(this).serialize(), function(data){
                    window.location.href = "{{url('admin')}}";
                }, function(result){
                    $(that).find(":submit").removeAttr("disabled");
                    artInfo(result);
                });
                return false;
            });
        });
    </script>
@endsection
